<template>
  <div class="wrap">
    <a-tabs defaultActiveKey="1">
      <a-tab-pane tab="我的消息" key="1" forceRender></a-tab-pane>
    </a-tabs>
    <a-list itemLayout="horizontal" :dataSource="list">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-list-item-meta>
          <img slot="avatar" src="~/static/msg.jpg" />
          <a-row slot="title" type="flex" justify="space-between">
            <a-col :span="19">{{item.title}}</a-col>
            <a-col :span="5">{{item.create_time}}</a-col>
          </a-row>
          <a-row slot="description" type="flex" justify="space-between">
            <a-col :span="21">{{item.test}}</a-col>
          </a-row>
        </a-list-item-meta>
      </a-list-item>
    </a-list>
    <div class="pagination">
      <a-pagination showQuickJumper v-model="page" :total="total" @change="onChange" />
    </div>
  </div>
</template>

<script>
import { MESSAGE_NOTICE } from "../server";
export default {
  layout: "main",
  data() {
    return {
      list: [],
      total: 0,
      page: 1
    };
  },
  created() {
    this.getMgs();
  },
  methods: {
    getMgs() {
      MESSAGE_NOTICE({ page: this.page, pageshow: 10 }).then(res => {
        if (res) {
          this.list = res.data.list;
          this.total = res.data.count;
        } else {
          this.list = [];
        }
      });
    },
    onChange(page) {
      this.page = page;
      this.getMgs();
    }
  }
};
</script>
<style lang="less" scoped>
.wrap {
  border: 3px solid #0084ff;
  border-radius: 6px;
  padding: 10px;
}
.pagination {
  margin: 70px auto 60px;
  text-align: center;
}
</style>